<template>
  <div class="panel-chart">
    <div v-if="showEchartRef" class="chart" ref="chart"></div>
    <div v-if="chartType === 'table'" style="height:100%">
      <el-table
        :data="showData"
        size="mini"
        height="100%"
        lazy
        highlight-current-row
      >
        <el-table-column
          v-for="item in Object.keys(showData[0] || {})"
          :key="item"
          :prop="item"
          :label="item"
        >
        </el-table-column>
      </el-table>
    </div>
    <div v-if="chartType === 'sum'" style="height:100%">
      <no-chart :title="sumTitle" :showData="sumShowData"></no-chart>
    </div>
    <div v-if="chartType == 'scrolltable'" style="height:100%">
      <scroll-table :headTitle="headTitle" :content="content"></scroll-table>
    </div>
  </div>
</template>
<script>
import noChart from "../Middle/no.vue";
import scrollTable from "../table/index.vue";
export default {
  props: {
    chartInfo: undefined,
    showData: undefined,
  },
  components: {
    noChart,
    scrollTable
  },
  data() {
    return {
      chartRef: undefined,
      chartType: undefined,
      sumTitle: "",
      sumShowData: [],
      headTitle:[],
      content:[],
    };
  },
  computed: {
    showEchartRef: function () {
      return ["gauge", "pie", "line", "bar", undefined].includes(
        this.chartType
      );
    },
  },
  watch: {
    chartInfo: {
      handler() {
        this.buildChart();
      },
    },
    showData: {
      handler() {
        this.buildChart();
      },
    },
  },
  mounted() {},
  methods: {
    buildChart() {
      // console.log("zct showData",this.showData)
      try {
        if (!this.chartInfo || !this.showData) {
          return;
        }
        const { chartType, chartJson, chartHtml } = this.chartInfo;
        this.chartType = chartType;
        const optionData = JSON.parse(chartJson);
        let sqlHandleData = JSON.parse(JSON.stringify(this.showData));
        if (chartHtml) {
          const funBody = chartHtml.split("handler(data)")[1].trim();
          if (funBody) {
            const fun = new Function("data", funBody);
            const dataRes = fun(sqlHandleData);
            sqlHandleData = dataRes;
          }
        }
        if (!optionData.baseOption) {
          return;
        }
        // console.log("zct after chartType",chartType)
        if (["table"].includes(chartType)) {
          // 渲染表格
          return;
        }else if(['scrolltable'].includes(chartType)){
          this.reBulidShowData();
          return;
        } else if (["sum"].includes(chartType)) {
          // 渲染表格
          const { title, item1, item2, item3 } = optionData.baseOption;
          this.sumTitle = title.show && title.text;
          const showSqlData = sqlHandleData[0];
          this.sumShowData = [item1, item2, item3].map((item) => {
            const key = item.name;
            const value = showSqlData[key];
            item.value = value;
            item.title = item.title || key;
            return item;
          });
          return;
        }

        if (["pie", "gauge"].includes(chartType)) {
          this.chartType = chartType;
          const showDataArray = [];
          sqlHandleData.forEach((element) => {
            const keys = Object.keys(element);
            keys.forEach((key) => {
              showDataArray.push({
                value: element[key],
                name: key,
              });
            });
          });
          optionData.baseOption.series[0].data = showDataArray;
        } else if (["bar", "line"].includes(chartType)) {
          this.chartType = chartType;
          const { x, y } = optionData.extInfo;
          const xArray = sqlHandleData.map((i) => i[x]); // X 轴
          const showDatax = sqlHandleData.map((i) => i[y]); // 数据
          optionData.baseOption.series[0].name = y;
          optionData.baseOption.series[0].data = showDatax;
          optionData.baseOption.xAxis.data = xArray;
          const xStart = 100 - Math.floor(1000 / xArray.length);
          optionData.baseOption.dataZoom = [
            {
              show: true,
              start: xStart,
              end: 100,
            },
          ];
        }

        this.chartRef = this.echarts.init(this.$refs.chart);
        this.chartRef.setOption(optionData, true);
      } catch (error) {
        console.error("render error ", error);
      }
    },
    reBulidShowData(){
      // console.log(this.showData);
      this.headTitle = [];
      this.content = [];
      this.headTitle = Object.keys(this.showData[0]);
      this.showData.map((item)=>{
       this.content.push(item)
      })
    }
  },
};
</script>
<style lang="less" scoped>
.panel-chart {
  height: 100%;
  position: relative;
  margin-bottom: 8px;
}
.chart {
  height: 100%;
}
/deep/.el-table,
/deep/.el-table__expanded-cell,
/deep/.el-table th,
/deep/.el-table tr {
  background-color: transparent;
}
/deep/.el-table thead{
  color: #4DDCFE;
}
/deep/.el-table td{
  border: none;
}
/deep/.el-table::before{
  height: 0;
}
/deep/.el-table--scrollable-y .el-table__body-wrapper{
  scrollbar-width: none;
}

/deep/.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
</style>
